<template>
  <div id="SortingSetting">
    <div class="content">
      <div class="overflow-auto">
        <div class="body">
          <!-- 选择排序类型 -->
          <div class="selectTypeSort">
            <el-radio-group v-model="selectTypeSort" size="small" @change="changeSelectTypeSort">
              <el-radio-button label="room">房型排序</el-radio-button>
              <el-radio-button label="room_num">房间排序</el-radio-button>
              <el-radio-button label="group">分组排序</el-radio-button>
            </el-radio-group>
          </div>
          <!--END 选择排序类型 -->
          <div class="sortRoom">
            <!-- 房型排序 -->
            <div class="sortRoom_list">
              <div class="reminder">
                <span>
                  拖拽{{ selectTypeSort == 'room' ? '房型' : selectTypeSort == 'room_num' ? '房间' : '分组' }}即可进行{{
                    selectTypeSort == 'room' ? '房型' : '房间' }}排序，
                  <span v-if="selectTypeSort == 'group'">房态日历</span>选定排序方式之后，
                  <span v-if="selectTypeSort != 'group'">单日房态</span>将按照下方顺序展示
                </span>
                <!-- <el-button type="text">
                  <i class="el-icon-close" style="color:#606266"></i>
                </el-button> -->
              </div>
              <draggable class="tabs_content" v-model="roomList" :group="groupA" @end="onDragEnd">
                <transition-group class="room_content_list">
                  <div class="room_content" v-for="room in roomList" :key="room.id">
                    <span v-if="selectTypeSort == 'room'"> {{ room.name }}</span>
                    <div v-if="selectTypeSort == 'room_num'">
                      {{ room.room_num }}
                      <p> {{ room.hotel_room ? room.hotel_room.pms_title : '123' }}</p>
                    </div>
                    <span v-if="selectTypeSort == 'group'"> {{ room.name }}</span>
                  </div>
                </transition-group>
              </draggable>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'SortingSetting',
  components: {
    draggable
  },
  data() {
    return {
      selectTypeSort: 'room',//选择排序类型
      groupA: {
        name: 'site',
        pull: true,
        put: true
      },
      roomList: [],//房间数组
    }
  },
  created() {
    this.getComputedStyle()
  },
  methods: {
    // 用户拖拽松开之后触发的函数
    onDragEnd() {
      let ids = this.roomList.map(item => {
        return item.id
      }).join(',')
      let data = {
        hotel_id: sessionStorage.getItem('hotel_id'),
        type: this.selectTypeSort,
        ids,
      }
      console.log(data, 'onDragEnd');
      this.my_request('supplier/hotel-pms-sort', data, 'PUT').then(res => {
        console.log(res, 'onDragEnd结果');
        console.log(res.data.message, 'onDragEnd结果');
      })
    },
    //改变排序类型  重新获取房间列表
    changeSelectTypeSort() {
      this.getComputedStyle()
    },

    // 获取房间数据
    getComputedStyle() {
      let data = {
        hotel_id: sessionStorage.getItem('hotel_id'),
        type: this.selectTypeSort
      }
      console.log(data, '排序获取数据data');
      this.my_request('supplier/hotel-pms-sort', data, 'GET').then(res => {
        console.log(res, '排序获取数据结果');
        let { code, data } = res.data
        if (200 === code) {
          this.roomList = data
        }
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.sortRoom {
  height: calc(100% - 80px);
  overflow: hidden;

  .sortRoom_list {
    height: calc(100% - 20px);

  }
}

::v-deep .content {
  .overflow-auto {
    width: calc(100% - 190px);
    height: 100%;
    overflow: hidden;
    padding: 20px;

    .body {
      width: 100%;
      padding-right: 0px;

      .reminder {
        margin: 20px 0;
        padding: 5px 15px;
        // width: 100%;
        background: #fff7e6;
        border: 1px solid #e6a23c;
        border-radius: 2px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .tabs_content {
        width: 100%;
        height: calc(100% - 78px);
        overflow: auto;

        .tabs_content_room {
          min-height: 120px;
          display: block;
        }

        .room_content_list {
          justify-content: flex-start;
          flex-wrap: wrap;
          display: flex;
        }

        .room_content {
          width: 136px;
          height: 72px;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 4px;
          margin: 0 16px 20px 0;
          box-shadow: 0px 4px 7px rgba(222, 222, 222, 0.5);
          background-color: white;
        }
      }
    }
  }
}
</style>